<template>
  <div>
    <van-tabs
      title-active-color="#fff"
      title-inactive-color="#fff"
      scrollspy
      sticky
      color="#fff"
      background="linear-gradient(90deg, #0af, #0085ff)"
    >
    <Loading v-if="loading"></Loading>
      <van-tab v-for="(item,index) in this.options" :key="index" :title=" item ">
        <van-tabs title-active-color="#333" type="false">
          <van-tab title="综合排序">
            <ul>
              <li @click="toDetail(item)" v-for="item in shop" :key="item.id">
                <!-- 列表上部分 -->
                <div class="listtop">
                  <div class="left">
                    <img :src="item.smallimg" alt />
                  </div>
                  <div class="right">
                    <h2>
                      {{ item.name }}
                      <span>...</span>
                    </h2>
                    <p>
                      <van-rate :size="5" color="gold" void-icon="star" void-color="gold" />4.3月售8716单
                    </p>
                    <p>
                      ￥35起送|配送￥5
                      <span>4.59km|52分钟</span>
                    </p>
                  </div>
                </div>
                <!-- 列表下部分 -->
                <div class="listbom">
                  <div class="bomleft">
                    <div class="bomtext">
                      <span>盖浇饭</span>
                    </div>
                    <div class="bomp">
                      <p>
                        <span>减</span> 满25元减15元，满40元减17元，满58...
                      </p>
                      <p>
                        <span>特</span> 特价商品0.88元起
                      </p>
                    </div>
                  </div>
                  <div class="bomright">
                    <p>4个活动</p>
                  </div>
                </div>
              </li>
            </ul>
          </van-tab>
          <van-tab title="距离最近">
            <ul>
              <li v-for="item in 10">
                <!-- 列表上部分 -->
                <div class="listtop">
                  <div class="left">
                    <img
                      src="https://cube.elemecdn.com/D/73/8B2C479DA4DD38B25274B1268ED46jpeg.jpeg?x-oss-process=image/format,webp/resize,w_130,h_130,m_fixed"
                      alt
                    />
                  </div>
                  <div class="right">
                    <h2>
                      华风宾馆(正义路店)
                      <span>...</span>
                    </h2>
                    <p>
                      <van-rate :size="5" color="gold" void-icon="star" void-color="gold" />4.3月售8716单
                    </p>
                    <p>
                      ￥35起送|配送￥5
                      <span>4.59km|52分钟</span>
                    </p>
                  </div>
                </div>
                <!-- 列表下部分 -->
                <div class="listbom">
                  <div class="bomleft">
                    <div class="bomtext">
                      <span>盖浇饭</span>
                    </div>
                    <div class="bomp">
                      <p>
                        <span>减</span> 满25元减15元，满40元减17元，满58...
                      </p>
                      <p>
                        <span>特</span> 特价商品0.88元起
                      </p>
                    </div>
                  </div>
                  <div class="bomright">
                    <p>4个活动</p>
                  </div>
                </div>
              </li>
            </ul>
          </van-tab>
          <van-tab title="销量最高">
            <ul>
              <li v-for="item in 10">
                <!-- 列表上部分 -->
                <div class="listtop">
                  <div class="left">
                    <img
                      src="https://cube.elemecdn.com/6/34/207e65ae1b760251ea5441ff9069cjpeg.jpeg?x-oss-process=image/format,webp/resize,w_130,h_130,m_fixed"
                      alt
                    />
                  </div>
                  <div class="right">
                    <h2>
                      胖大厨(朝阳门店)
                      <span>...</span>
                    </h2>
                    <p>
                      <van-rate :size="5" color="gold" void-icon="star" void-color="gold" />4.3月售8716单
                    </p>
                    <p>
                      ￥35起送|配送￥5
                      <span>4.59km|52分钟</span>
                    </p>
                  </div>
                </div>
                <!-- 列表下部分 -->
                <div class="listbom">
                  <div class="bomleft">
                    <div class="bomtext">
                      <span>盖浇饭</span>
                    </div>
                    <div class="bomp">
                      <p>
                        <span>减</span> 满25元减15元，满40元减17元，满58...
                      </p>
                      <p>
                        <span>特</span> 特价商品0.88元起
                      </p>
                    </div>
                  </div>
                  <div class="bomright">
                    <p>4个活动</p>
                  </div>
                </div>
              </li>
            </ul>
          </van-tab>
          <van-tab title="筛选">
            <ul>
              <li v-for="item in 10">
                <!-- 列表上部分 -->
                <div class="listtop">
                  <div class="left">
                    <img
                      src="https://cube.elemecdn.com/6/34/207e65ae1b760251ea5441ff9069cjpeg.jpeg?x-oss-process=image/format,webp/resize,w_130,h_130,m_fixed"
                      alt
                    />
                  </div>
                  <div class="right">
                    <h2>
                      胖大厨(朝阳门店)
                      <span>...</span>
                    </h2>
                    <p>
                      <van-rate :size="5" color="gold" void-icon="star" void-color="gold" />4.3月售8716单
                    </p>
                    <p>
                      ￥35起送|配送￥5
                      <span>4.59km|52分钟</span>
                    </p>
                  </div>
                </div>
                <!-- 列表下部分 -->
                <div class="listbom">
                  <div class="bomleft">
                    <div class="bomtext">
                      <span>盖浇饭</span>
                    </div>
                    <div class="bomp">
                      <p>
                        <span>减</span> 满25元减15元，满40元减17元，满58...
                      </p>
                      <p>
                        <span>特</span> 特价商品0.88元起
                      </p>
                    </div>
                  </div>
                  <div class="bomright">
                    <p>4个活动</p>
                  </div>
                </div>
              </li>
            </ul>
          </van-tab>
        </van-tabs>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Loading from '../components/Loading'
export default {
  components: {
    Loading
  },
  data() {
    return {
      options: ["全部", "面食粥店", "简餐便当", "汉堡披萨","香锅冒菜","小吃炸串","地方菜系","日韩料理","轻餐简食"],
      loading: true
    };
  },
  computed: {
    ...mapState(["shop"]),
  },
  methods: {
    toDetail(item) {
      this.$router.push({ name: "shop" ,query:item});
    },
  },
  async mounted() {
    let url = "http://localhost:8080/data/shop.json";
    let res = await this.$axios.get(url);
    this.$store.dispatch("shop", res.data);
  },
  created() {
    this.$bus.$emit("footernav", false);
    this.$store.dispatch("setshow", false);
  },
  updated() {
    if (this.shop.length > 0) {
      this.loading = false
    }
  },
  beforeDestroy() {
    this.$bus.$emit("footernav", true);
    this.$store.dispatch("setshow", true);
  },
};
</script>

<style lang="less" scoped>
.listtop {
  margin-top: 20px;
  margin-left: 5px;
  height: 64px;
  .left {
    width: 64px;
    height: 64px;
    float: left;
    // border: 1px solid rgba(0, 0, 0, 0.08);
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    float: left;
    // margin-left: 5px;
    h2 {
      color: #333;
      font-weight: 700;
      font-size: 14px;
      overflow: hidden;
      margin-right: 30px;
      span {
        margin-left: 40px;
      }
    }
    p {
      color: #666;
      font-size: 12px;
      margin-top: 5px;
      .van-rate {
        margin-right: 5px;
      }
      span {
        margin-left: 60px;
      }
    }
  }
}

.listbom {
  width: 280px;
  height: 76px;
  color: #666;
  font-size: 12px;
  margin-top: 10px;
  margin-left: 80px;
  display: flex;
  justify-content: space-between;
  .bomleft {
    width: 230px;
    height: 69px;
    .bomtext {
      margin-bottom: 10px;
      span {
        border: 1px solid #ccc;
        font-weight: normal;
      }
    }
    .bomp {
      width: 230px;
      height: 36px;
      p {
        width: 230px;
        height: 18px;
        margin-bottom: 5px;
        overflow: hidden;
        span {
          font-size: 14px;
          background-color: rgb(240, 115, 115);
          color: #fff;
          margin-right: 5px;
        }
      }
    }
  }
  .bomright {
    width: 59px;
    height: 36px;
    margin-top: 30px;
    p {
      color: #999;
      font-size: 10px;
    }
  }
}
</style>